iT邦幫忙

2023 iThome 鐵人賽

DAY 23
0
Mobile Development

用30天學習做出我的第一個Flutter App系列 第 23

Day23 [Flutter] Widget( 4 )

  • 分享至 

  • xImage
  •  
  • TextField

可以用來接收使用者輸入的字串和顯示的Widget

屬性 | 功能 | 值
------------- | -------------
decoration | 設定輸入框的外觀,包括標籤(labelText)、提示文本(hintText)、圖示(icon) | InputDecoration 類型,decoration:InputDecoration(labelText:'請輸入名稱')
onChanged | 輸入文本時觸發的回調函數,當使用者輸入文字時,可以用來處理文本變化的事件 | onChanged:(text){print('輸入的文本:$text');}
controller | 控制器,用來訪問、更改和驗證輸入的內容 | TextEditingController類型,TextEditingController _controller = TextEditingController();TextField(controller: _controller)
keyboardType | 設定鍵盤的類型,例如文字、數字、電子郵件 | TextInputType.text/TextInputType.number/TextInputType.emailAddress
obscureText | 當設置為true時,輸入內容就會被隱藏,通常是用在密碼輸入時會使用 | obscureText:true/false
maxLength | 限制輸入內容的最大長度 | maxLength: 10
minLines | 限制輸入內容的最小行數 | maxLines: 3
textCapitalization | 控制輸入內容的大小寫 | TextCapitalization.words(每個單詞首字母大寫)/sentences(每個句子首字母大寫)

  • AlertDialog

彈出式對話框,包含一條簡短的文字內容、標題和按鈕,用來向使用者確認或提醒消息。

屬性 | 功能 | 值
------------- | -------------
title | AlertDialog的標題 | title: Text('')
content | 提醒內容 | content: Text('')
actions | 包含按鈕的列表,每個按鈕都代表使用者可以執行的操作 | actions: [FlatButton(...),FlatButton(...)]

  • 使用 showDialog 來顯示 AlertDialog
    在點擊按鈕後需要觸發對話框時要使用showDialog函數,使用方法如下:

     ElevatedButton( //點擊按鈕
       child: Text('顯示對話框'),
       onPressed: () {
         showDialog(
           context: context,
           builder: (BuildContext context) {
             return AlertDialog(
               title: Text('對話框標題'),
               content: Text('對話框內容'),
               actions: <Widget>[
                 FlatButton(
                   onPressed: () {
                   },
                 ),
               ],
             );
           },
         );
       },     
     )
    

上一篇
Day22 [Flutter] Widget( 3 )
下一篇
Day24 [Flutter] 頁面轉換
系列文
用30天學習做出我的第一個Flutter App30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言